<template>
	<div id="bookFlightPage">
		<ordering v-if="ordering"></ordering>
		<div class="content">
			<div class="order">
				<div v-for="(item,i) in routerMess">
					<div class="route">
						<div>
							<span v-if="i==0" class="iconfont">&#xe608;</span>
							<span v-if="i==1" class="iconfont">&#xe60a;</span>
							<span>{{item.segments[0].fromCityCn}} - {{item.segments[item.segments.length-1].toCityCn}}</span>
							<span class="depTime">{{item.segments[0].fromDate|date}} {{item.segments[0].fromDate|week}}</span>
						</div>
						<div><span class="duration">总时长{{flightDuration(item.segments)|duration}}</span></div>
					</div>
					<div class="routeMess">
						<div class="routeMess_top">
							<div class="cangwei">
								<div>
									<span v-for="(cabin,n) in cabinDetail(i,item)">{{cabin|cabin}}
										<label v-if="n!=(cabinDetail(i,item).length-1)">+ </label>
									</span>
								</div>
								<div><span @click="endorse" class="gaiqian">退改签/行李额</span></div>
							</div>
							<div class="shrink" @click="shrink(item,i)">
								<span class="iconfont" v-if="!item.show">&#xe6ea;</span>
								<span class="iconfont" v-if="item.show">&#xe6e9;</span>
							</div>
						</div>
						<div class="simpleRouterMess" v-if="!item.show">
							<div>
								<div class="time">{{item.segments[0].fromDate|time}}</div>
								<div class="airport">{{item.segments[0].fromAirportCn}}{{item.segments[0].fromTower}}</div>
							</div>
							<div class="midmess">
								<div v-if="directFlight(item).show">
									<p class="type" :class="{'twoTran':directFlight(item).color}">转</p>
									<p class="tranformCity" :class="{'twoTran':directFlight(item).color}">{{directFlight(item).city}}</p>
								</div>
								<div v-if="stopOver(item).show">
									<p class="type" :class="{'twoTran':stopOver(item).color}">经停</p>
									<p class="stopoverCity" :class="{'twoTran':stopOver(item).color}">{{stopOver(item).city}}</p>
								</div>					
							</div>
							<div>
								<div class="time">{{item.segments[item.segments.length-1].toDate|time}}</div>
								<div class="airport">{{item.segments[item.segments.length-1].toAirportCn}}{{item.segments[item.segments.length-1].toTower}}</div>
							</div>
						</div>
						<div class="routeMess_bottom" v-if="item.show">
							<p><span class="iconfont point top">&#xe613;</span></p>
							<p><span class="iconfont point bottom">&#xe613;</span></p>
							<div class="seg" v-for="(seg,index) in item.segments">
								<div class="segLeft">
									<div class="times">
										<div class="time">{{seg.fromDate|time}}</div>
										<div class="duration">{{seg.flightDuration|duration}}</div>
										<div class="time">{{seg.toDate|time}}</div>
									</div>
									<div class="airport">
										<div class="airpt"><span class="iconfont start"></span>{{seg.fromAirportCn}}{{seg.fromTower}}</div>
										<div class="transfer" v-for="stopOver in seg.stopOver">
											<span class="iconfont zhuan">&#xe60c;</span>
											<span class="transferCity">{{stopOver.stopAirport}}</span>
											<span v-if="stopOver.stopTime">停留{{stopOver.stopTime}}</span>
										</div>
										<div class="airpt"><span class="iconfont end"></span>{{seg.toAirportCn}}{{seg.toTower}}</div>
										<div class="transfer" v-if="!(index==(item.segments.length-1))">
											<span class="iconfont zhuan">&#xe606;</span>
											<span class="transferCity">{{seg.toCityCn}}</span>
											<span>停留{{stopTime(seg,index,item.segments)|duration}}</span>
										</div>
									</div>
								</div>
								<div class="airline">
									<div>{{seg.airlineChn}}</div>
									<div>{{seg.flightNo}}</div>
									<div v-if="seg.shareFlightNo"><span class="realFlightNo">实际承运</span>{{seg.shareFlightNo}}</div>
									<div>{{seg.planeModel}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="passenger">
				<div class="title">
					<b>请选择乘机人</b>
					<span>成人<span class="count"> {{choosedNameList.length}} </span>人</span>
				</div>
				<div class="nameList">
					<ul>
						<li v-for="(item,index) in passengerList" v-if="index<showMoreLimit">
							<mu-raised-button @click="checked(item,index)" :label=item.firstNameCn class="name" :class="{'nameChecked':(item.checked === index)}"/>
						</li>					
						<li>
							<mu-raised-button @click="addPassenger" label="新增" labelClass="add" class="name nameChecked" />
						</li>
					</ul>
					<div class="showMore" v-if="passengerList.length>7" @click="doShow">
						<span v-if="!showMore">更多乘机人 <i class="iconfont">&#xe6ea;</i></span>
						<span v-if="showMore">收起乘机人 <i class="iconfont">&#xe6e9;</i></span>
					</div>
				</div>
				
				<div class="choosedNameList">
					<ul>
						<li v-for="name in choosedNameList">
							<div class="flex">
								<span @click="deleteName(name)" class="iconfont delete">&#xe6e8;</span>
								<div>
									<p>{{name.firstNameCn}}</p>
									<p>{{name.docId}}</p>
								</div>
							</div>
							<div><span @click="editName(name)" class="iconfont detail">&#xe600;</span></div>
						</li>						
					</ul>
				</div>
			</div>
			<div class="otherMess">
				<div class="same">
					<div class="flex">
						<div class="title">联系人</div>
						<div class="fullWidth">
							<mu-text-field v-model="contactUser_" fullWidth type="text" inputClass="textInput" underlineFocusClass="underline" />
						</div>
					</div>
				</div>
				<div class="same">
					<div class="flex">
						<div class="title">联系手机</div>
						<div class="fullWidth">
							<mu-text-field v-model="phoneNumber_" fullWidth type="number" inputClass="textInput" underlineFocusClass="underline" />
						</div>
					</div>
				</div>
				<div class="same">
					<div class="flex">
						<div class="title">已选保险</div>
						<div class="baoxian">
							<span v-for="item in insurance_" v-show="item.count">{{item.displayName}}x{{item.count}}、</span>
						</div>
					</div>
					<div @click="toInsurance"><span class="iconfont detail">&#xe600;</span></div>
				</div>
				<div class="claim">
					<div>
						<p class="title">报销凭证</p>
						<p class="explain">航班起飞后7天可补开报销凭证</p>
					</div>
					<div>
						<mu-switch v-model="isReimbursement_"/>
					</div>
				</div>
				<div v-show="isReimbursement_" class="claimMess">
					<div class="same">
						<div class="title">邮寄运费</div>
						<div></div>
						<div class="money"><span class="currencyType">￥</span><span class="count">{{postage}}</span></div>
					</div>
					<div class="same">
						<div class="flex">
							<div class="title">收件人</div>
							<div class="fullWidth"><mu-text-field v-model="reimbursementMess.name" fullWidth inputClass="textInput" underlineFocusClass="underline" /></div>
						</div>
					</div>
					<div class="same">
						<div class="flex">
							<div class="title">手机号码</div>
							<div class="fullWidth"><mu-text-field v-model="reimbursementMess.phone" fullWidth type="number" inputClass="textInput" underlineFocusClass="underline" /></div>
						</div>
					</div>
					<div class="same">
						<div class="flex">
							<div class="title">邮寄地址</div>
							<div class="fullWidth"><mu-text-field v-model="reimbursementMess.address" fullWidth inputClass="textInput" underlineFocusClass="underline" /></div>
						</div>
					</div>
				</div>
			</div>
			<p class="explains">点击支付表示阅读及同意 <span @click="tongzhi1">锂电池及危险品通知</span> 和 <span @click="tongzhi2"> 机票预订须知</span></p>			
			<!--点击明细-->
			<div class="shade" @click="particulars" v-show="isParticulars"></div>
			<div class="bookingDetail" v-show="isParticulars">
				<div class="items">
					<div class="item">
						<p>成人票价</p>
						<p class="money"><span>￥{{orderMess.money}}</span> x <span>{{choosedNameList.length}}</span></p>						
					</div>
					<div class="item" v-if="activity_ticket">
						<p>票面立减</p>
						<p class="money"><span>￥{{activity_ticket}}</span></p>
					</div>					
				</div>
				<div class="items">
					<div class="item" v-if="orderMess.otherFee">
						<p>基建+燃油</p>
						<p class="money"><span>￥{{orderMess.otherFee}}</span> x <span>{{choosedNameList.length}}</span></p>
					</div>
					<div class="item" v-if="orderMess.tax">
						<p>税费</p>
						<p class="money"><span>￥{{orderMess.tax}}</span> x <span>{{choosedNameList.length}}</span></p>
					</div>
				</div>
				<div class="items">
					<div class="item" v-for="item in insurance_" v-if="item.count">
						<p>{{item.displayName}}</p>
						<p class="money"><span>￥{{item.insuranceFee}}</span> x <span>{{item.count}}</span></p>
					</div>
					<div class="item" v-if="activity_insurance">
						<p>保险立减</p>
						<p class="money"><span>￥{{activity_insurance}}</span></p>
					</div>
				</div>
				<div class="items" v-if="isReimbursement_">
					<div class="item">
						<p>邮寄费用</p>
						<p class="money"><span>￥{{postage}}</span></p>
					</div>
				</div>
			</div>
		</div>		
		<!--底部-->
		<div class="footer" :class="{'footered':isParticulars}">
			<div>
				<div class="money">￥<span class="count">{{price_}}</span></div>
			</div>
			<div class="particulars" @click="particulars">明细 <span v-show="isParticulars" class="iconfont detail">&#xe6e9;</span><span v-show="!isParticulars" class="iconfont detail">&#xe6ea;</span></div>
			<div><mu-raised-button @click="toPay" label="去支付" class="topay" secondary :disabled="ordering"/></div>
		</div>
		<!--校验-->
		<mu-dialog :open="verify" @close="verify=!verify">
			{{verifyText}}
			<mu-flat-button slot="actions" @click="verify=!verify" label="确定" />
		</mu-dialog>
	</div>
</template>

<script>
	import main from './main';
	export default {
		...main,
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	@import '../../style/mixin.scss';
	@import "./style.scss";
</style>